import React, { PureComponent } from 'react';
import { WritterWrapper, ClearButton } from './style';
import { Editor } from 'react-draft-wysiwyg'
// 样式文件
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'

class Writter extends PureComponent {

	state = {
		showRichText: false,
		editorContent: '',
		editorState: '',
	}

	handleClearContent = () => {
		this.setState({
			editorState: ''
		})
	}

	handleGetText = () => {
		if (!this.state.editorContent) {
			alert('内容为空，不能提交')
		}
		this.setState({
			showRichText: true
		})
		console.log(this.state.editorContent)
	}
	// 内容发生变化时调用此方法
	onEditorChange = (editorContent) => {
		this.setState({
			editorContent
		})
	}
	// 状态发生变化时调用此方法
	onEditorStateChange = (editorState) => {
		this.setState({
			editorState
		})
	}

	render() {
		const { editorState } = this.state
		return (
			<WritterWrapper>
				<div style={{ marginTop: 10, paddingTop: 15 }}>
					<ClearButton onClick={this.handleClearContent}>一键清空</ClearButton>
					<ClearButton onClick={this.handleGetText}>提交文稿</ClearButton>
				</div>
				<div title="富文本编辑器" style={{ height: 450, marginTop: 20 }}>
					<Editor
						editorState={editorState}
						onContentStateChange={this.onEditorChange}
						onEditorStateChange={this.onEditorStateChange}
					/>
				</div>
			</WritterWrapper>
		)
	}
}

export default Writter;
